﻿<!DOCTYPE html>
<html lang="zxx">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="icon" href="__STATIC__/index/images/favicon.png">
	<title>手机端商城-微博绑定手机页面</title>

	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="__STATIC__/index/css/materialize.css">
	<link rel="stylesheet" href="__STATIC__/index/css/loaders.css">
	<link rel="stylesheet" href="__STATIC__/index/css/line-awesome.css">
	<link rel="stylesheet" href="__STATIC__/index/css/line-awesome-font-awesome.css">
	<link rel="stylesheet" href="__STATIC__/index/css/owl.carousel.min.css">
	<link rel="stylesheet" href="__STATIC__/index/css/owl.theme.default.min.css">
	<link rel="stylesheet" href="__STATIC__/index/css/style.css">
</head>
<body>

	<!-- navbar -->
	<div class="navbar">
		<div class="container">
			<div class="row">
				<div class="col s6">
					<div class="content-left">
						<a href="#slide-out" data-activates="slide-out" class="sidebar"><i class="fa fa-bars"></i></a>
						<a href="{:Url('index/index')}"><h3>手机端商城</h3></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end navbar -->

	<!-- sidebar -->
	<div class="sidebar-panel">
		<ul id="slide-out" class="collapsible side-nav">
			<div class="user-view">
				<div class="background">
					<img src="__STATIC__/index/images/blog3.jpg" alt="">
				</div>
				<img class="circle responsive-img" src="__STATIC__/index/images/timg.gif" alt="">
				<span class="white-text name">未登录</span>
			</div>
			</li>
			<li><a href="{:Url('index/index')}"><i class="fa fa-home"></i>首页</a></li>
			<li><a href="{:Url('index/product/index')}"><i class="fa fa-female"></i>商品分类</a></li>
			<li><a href="{:url('index/login/index')}"><i class="fa fa-sign-in"></i>登陆</a></li>
			<li><a href="{:url('index/reg/index')}"><i class="fa fa-user-plus"></i>注册</a></li>
			<li><a href="#"><i class="fa fa-envelope-o"></i>联系我们</a></li>
		</ul>
	</div>
	<!-- end sidebar -->

	<!-- sign up -->
	<div class="sign-up segments-page">
		<div class="container">
		<div class="signup-contents">
			<div class="pages-title">
				<h3>微博绑定手机</h3>
			</div>
			<form action="{:url('checkwbBind')}" method="POST">
				<input type="text" id="tell" placeholder="请输入手机号码" name="tell">
				<input type="password" placeholder="密码" name="pwd">
				<input type="password" placeholder="确认密码" name="repwd">
				<input type="text" id="code" placeholder="请输入短信验证码" name="tellcode">
				<button class="button sendCode" id="btn_code" onclick="sendMessage()" type="button"><i class="fa fa-send"></i>获取手机验证码</button>
				<div><button class="button" type="submit"><i class="fa fa-send"></i>注册</button></div>
			</form>
		</div>
		</div>
	</div>
	<!-- end sign up -->

	<script src="__STATIC__/index/js/jquery.min.js"></script>
	<script src="__STATIC__/index/js/materialize.js"></script>
	<script src="__STATIC__/index/js/owl.carousel.min.js"></script>
	<script src="__STATIC__/index/js/main.js"></script>

</body>
<script>  

//<button class="button" id="tellgetcode"><i class="fa fa-send"></i>获取手机验证码</button>

var InterValObj; //timer变量，控制时间 
var count = 60; //间隔函数，1秒执行 
var curCount;//当前剩余秒数 

function sendMessage() { 
	//检验手机号码是否合法
	var re = /^1\d{10}$/;           
	if(re.test($("#tell").val())){
		curCount = count; 
	　　//设置button效果，开始计时 
		$("#btn_code").attr("disabled", "true"); 
		$("#btn_code").html(curCount + "秒后可重新发送"); 
		InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
		//请求后台发送验证码 TODO     
		$(sendCode());
	}else{
		alert("手机格式不正确!");
	} 
} 
//timer处理函数 
function SetRemainTime() { 
		if (curCount == 0) {         
			window.clearInterval(InterValObj);//停止计时器 
			$("#btn_code").removeAttr("disabled");//启用按钮 
			$("#btn_code").html("重新发送验证码"); 
		} 
		else{ 
		curCount--; 
		$("#btn_code").html(curCount + "秒后可重新发送"); 
	} 
} 
//点击按钮发送短信验证码
function sendCode(){
	$.ajax({
		url:"{:Url('index/login/send')}",
		type:"get",
		data:{tell:$('#tell').val()},
		dataType:"html",//数据通信的类型
		success:function(data){
		}
	});
}
</script>
</html>
